<template>
  <div>
    <div class="laster">
      <el-card>
        <el-row>
          <el-col :span="12">
            <el-row class="basic">
              <el-col :span="24">
                <span class="traing"></span>不同艇种训练占比
                <span class="traing"></span>
              </el-col>
            </el-row>
            <el-table :data="typeList" class="tableColumn">
              <el-table-column label="艇支" align="center" prop="boatType" />
              <el-table-column label="次数" align="center" prop="count(1)" :show-overflow-tooltip="true" />
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-col :span="12">
              <span class="traing"></span>号位占比
              <span class="traing"></span>
            </el-col>
            <el-col :span="12">
              <el-select
                v-model="boatType"
                @change="getProportion"
                placeholder="选择艇支"
                clearable
                size="small"
                style="width: 160px"
              >
                <el-option
                  v-for="dict in statusIlls"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-col>
            <div id="pic7"></div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="stauts">
        <el-row>
          <el-col :span="24">
            <span class="traing"></span>浆位占比
            <span class="traing"></span>
          </el-col>
          <el-col :span="24">
            <div id="pic22"></div>
          </el-col>
        </el-row>
      </el-card>
      <div class="stauts">
        <el-card>
          <el-row class="basic stauts">
            <el-col :span="24">
              <span class="traing"></span>不同艇支划行训练量
              <span class="traing"></span>
            </el-col>
            <!-- 柱形图 -->
            <el-col :span="24">
              <div
                style="height:300px;margin:0 auto;"
                v-if="activeName==1&&config1.xAxisData.length>0"
              >
                <pill :config="config1"></pill>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div class="stauts">
        <el-card>
          <el-row class="basic stauts">
            <el-col :span="24">
              <span class="traing"></span>不同艇支划行时长
              <span class="traing"></span>
            </el-col>
            <!-- 柱形图 -->
            <el-col :span="24">
              
              <div style="height:300px;margin:0 auto;" v-if="activeName==1&&config2.xAxisData.length>0">
                <pill :config="config2"></pill>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import {
  proportion,
  trainingBoatType,
  boattotal,
  BoatTypetime,sportmanoarType
} from "@/api/monitor/logininfor";
import pill from "@/components/echarts/pill";
export default {
  components: { pill },
  props: ["activeName"],
  watch: {
    activeName: function () {
      if (this.activeName == 1) {
        this.trainingBoat();
        this.cireture2();
        this.cireture();
      }
    },
  },
  data() {
    return {
      config1: {
        id: "cheng",
        xAxisData: [],
        data: [],
        name: "不同艇支划行训练量",
      }, //第一个 柱形组件数据图配置
      config2: {
        id: "ping",
        xAxisData: [],
        data: [],
        name: "不同艇支划行训练量",
      }, //第2个 柱形组件数据图配置
      sportsoarType:[],
       soarname:[],
      secondForm: {},
      typeList: [],
      statusIlls: [],
      boatType: "",
      proportionArr: [
        {
          name: "",
          value: 0,
        },
      ],
      proportionName: [],
    };
  },
  mounted() {
    //this.handlerLook();
    this.GetListing("type_boat_support").then((res) => {
      this.statusIlls = res.data;
    });
    this.getProportion();
    this.boattotaling();
    if (this.activeName == 3) {
        this.cireture();
      }  
  },
  methods: {
    getProportion() {
      proportion({
        sportsManId: this.$route.query.id,
        boatType: this.boatType,
        // position: 1
      })
        .then((res) => {         
          if (res.code == 200) {
            let arr = [];
            let nameArr = [];           
            for (let i = 0; i < res.data.length; i++) {
              nameArr.push(`${res.data[i].position}号位`);
              arr.push({
                name: `${res.data[i].position}号位`,
                value: res.data[i]["count(1)"],
              });
            }
            if (res.data.length == 0) {
              arr = [
                {
                  name: "",
                  value: 0,
                },
              ];
            }
            this.proportionArr = [...arr];
            this.proportionName = [...nameArr];
            
            this.initData("pic7");
          }
        })
        .catch((err) => {});
    },
    trainingBoat() {
      var than = this;
      trainingBoatType({ sportsManId: this.$route.query.id })
        .then((res) => {
         
          than.config1.xAxisData = [];
          than.config1.data = [];
          res.data.map((e) => {
            than.config1.xAxisData.push(e.boatType);
            than.config1.data.push(e.rowingKilometers);
          });
        })
        .catch((err) => {});
    },
    cireture2() {
      var than = this;
      BoatTypetime({ sportsManId: this.$route.query.id })
        .then((res) => {         
          than.config2.xAxisData = [];
          than.config2.data = [];
          res.data.map((e) => {
            than.config2.xAxisData.push(e.boatType);
            than.config2.data.push(e.classHour);
          });
        })
        .catch((res) => {});    
    },
    boattotaling() {
      boattotal({
        sportsManId: this.$route.query.id,
      })
        .then((res) => {      
          this.typeList=res.data;
        })
        .catch((res) => {});
    },   
    cireture() {
      sportmanoarType({
        sportsManId: this.$route.query.id,
      })
        .then((res) => {        
          for (let i = 0; i < res.data.length; i++) {
            this.sportsoarType.push({
                name: res.data[i].oarType,
                value: res.data[i]["count"],
              });    
            //  this.soarname.push(res.data[i].oarType);
               
          }
          
           this.initData1("pic22");
        })
        .catch((res) => {});
        this.initData1("pic22");
    },   
    // 圆图
    initData(element) {    
      var myChart = this.$echarts.init(document.getElementById(element));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: this.proportionName,
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [...this.proportionArr],
          },
        ],
      });
    }, 
    initData1(element) {
      var myChart = this.$echarts.init(document.getElementById(element));
      myChart.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{b} : {c} ({d}%)",
                },
                // legend: {
                //   orient: "vertical",
                //   bottom: "bottom",
                //   data: this.soarname,
                // },
                color:['#75B6E4','#90EC7D','#46454A'],
                series: [
                    {
                        // name: "访问来源",
                        type: "pie",
                        radius: "70%",
                        label: {
                        normal: {
                            position: "inner",
                            show: false,
                        },
                        },
                        center: ["45%", "45%"],
                        data: this.sportsoarType,
                        itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                         },
                        },
                    },
                ],
            });
    },
    // 柱形图1
    Getlist(element) {
      var myChart = this.$echarts.init(document.getElementById(element));
     
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            // barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      });
    },
    // 柱形图2
    Getlist2(element) {
      var myChart = this.$echarts.init(document.getElementById(element));
    
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            // barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      });
    },
    handlerLook() {
      this.$nextTick(() => {
        this.initData("pic7");
        // this.Getlist("cheng");
        // this.Getlist2("ping");
      });
    },
  },
};
</script>
<style scoped>
.laster {
  margin: 20px;
}
.Partner {
  margin-top: 10px;
  margin-bottom: 20px;
  color: #666666;
}
#pic7 {
  width: 400px;
  height: 400px;
  margin-top: 82px;
  margin-left: 161px;
}
.basic {
  margin-bottom: 40px;
  text-align: left;
}
.stauts {
  margin-top: 20px;
}
.traing {
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #2583ff;
  margin-right: 7px;
  margin-left: 7px;
}
#pic22 {
  height: 300px;
  margin: 20px auto;
}
</style>